<template>
    <div class="clientpond">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="推广海报"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="flexwarpbox">
                <div :class="{ div: true, mar: (i + 1) % 3 === 0 }" v-for="(ele, i) in tghbtabledate" :key="i">
                    <div class="top">
                        {{ ele.groupName }}
                    </div>
                    <el-table :data="ele.info" style="width: 100%" :header-cell-style="{
                        background: '#ffffff',
                        color: '#9497B1',
                    }">
                        <el-table-column align="center" type="index" label="排序" width="100" />
                        <el-table-column align="center" prop="salesName" label="姓名">
                            <template #default="scope">
                                <div class="flexcenterbox">
                                    <img style="border-radius: 4px;width: 32px;height: 32px;margin-right: 5px;" crossorigin="anonymous" :src="scope.row.avatar" alt="">
                                    <div>{{ scope.row.salesName }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="amount" label="扫码客户数">
                            <template #default="scope">
                                <div class="count">
                                    {{ scope.row.amount }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getsalesapplyinfoapi } from '../../api/api'
const router = useRouter()
const route = useRoute()
const getsalesapplyinfo = () => {
    getsalesapplyinfoapi().then((res: any) => {
        console.log(res, '推广海报数据')
        tghbtabledate.value = res
    })
}
onMounted(() => {
    getsalesapplyinfo()
})
onActivated(() => {
    getsalesapplyinfo()
})
const tghbtabledate = ref<any>([])
const back = () => {
    window.history.back()
}
</script>



<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;


    .flexwarpbox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;

        .div {
            border-radius: 8px;
            margin-bottom: 16px;
            flex-shrink: 0;
            margin-right: 5px;
            width: 33%;
            background-color: #ffffff;

            .top {
                padding-top: 16px;
                padding-left: 10px;
                font-size: 16px;
                font-weight: 700;
                border-radius: 8px;
            }
        }
    }
}

.count {
    color: #FF7642 !important;
    font-weight: 700;
}

.mar {
    margin-right: 0px !important;
}
</style>